<template>
  <div class="interview2-wrap">
    <header>
      <div>写面经</div>
      <ul>
        <li>
          <img
            src="https://tse2-mm.cn.bing.net/th/id/OIP-C.IZFvmUwuv1zOJ_tLQ291wQHaHa?w=158&h=180&c=7&r=0&o=5&cb=11&pid=1.7"
            alt=""
          />
          面经发布
        </li>
        <li>
          <img
            src="https://tse2-mm.cn.bing.net/th/id/OIP-C.IZFvmUwuv1zOJ_tLQ291wQHaHa?w=158&h=180&c=7&r=0&o=5&cb=11&pid=1.7"
            alt=""
          />
          面经分享
        </li>
      </ul>
    </header>
    <footer>
      <div>面试宝典</div>
      <ul class="interviewExperiences">
        <li v-for="(interviewExperience, index) in interviewExperiences" :key="index">
          <img :src="interviewExperience.imgUrl" alt="" />
          <div>
            <p>{{ interviewExperience.industry }}面经</p>
            <p>{{ interviewExperience.chapter }}章</p>
            <p>共{{ interviewExperience.numberOfLearners }}学习</p>
          </div>
        </li>
      </ul>
    </footer>
  </div>
</template>

<script setup lang="ts">
const interviewExperiences = ref([
  {
    imgUrl:
      'https:/uploadfiles.nowcoder.com/files/20230118/835887561_1674043429203/Java工程师备份.png?x-oss-process=image%2Fresize%2Cw_80%2Ch_80%2Cm_mfit',
    industry: 'tepr',
    chapter: 10,
    numberOfLearners: 78360474993
  },
  {
    imgUrl:
      'https:/uploadfiles.nowcoder.com/files/20230118/835887561_1674043429203/Java工程师备份.png?x-oss-process=image%2Fresize%2Cw_80%2Ch_80%2Cm_mfit',
    industry: 'lpg',
    chapter: 13,
    numberOfLearners: 29696104989
  },
  {
    imgUrl:
      'https:/uploadfiles.nowcoder.com/files/20230118/835887561_1674043429203/Java工程师备份.png?x-oss-process=image%2Fresize%2Cw_80%2Ch_80%2Cm_mfit',
    industry: 'ybbj',
    chapter: 8,
    numberOfLearners: 24396133478
  },
  {
    imgUrl:
      'https:/uploadfiles.nowcoder.com/files/20230118/835887561_1674043429203/Java工程师备份.png?x-oss-process=image%2Fresize%2Cw_80%2Ch_80%2Cm_mfit',
    industry: 'pnbl',
    chapter: 13,
    numberOfLearners: 95744897571
  },
  {
    imgUrl:
      'https:/uploadfiles.nowcoder.com/files/20230118/835887561_1674043429203/Java工程师备份.png?x-oss-process=image%2Fresize%2Cw_80%2Ch_80%2Cm_mfit',
    industry: 'xfjy',
    chapter: 10,
    numberOfLearners: 17688866402
  }
])
</script>

<style scoped>
.interview2-wrap {
  width: 98%;
  height: 100%;
  padding: 20px;
  position: relative;
  top: -20px;
}

.interview2-wrap header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  border-radius: 12px;
  box-shadow: var(--boxShadow);

}

.interview2-wrap header div {
  width: 100%;
  font-size: 16px;
}
.interview2-wrap header ul {
  display: flex;
  justify-content: space-around;
  width: 200px;
}

.interview2-wrap header ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
}

.interview2-wrap header ul li img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.interview2-wrap footer {
  display: flex;
  padding: 10px;
  flex-direction: column;
  align-items: center;
  border-radius: 12px;
  box-shadow: var(--boxShadow);
}

.interview2-wrap footer div {
  width: 100%;
  font-size: 16px;
  padding: 10px;
}

.interview2-wrap footer ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
}

.interview2-wrap footer ul li {
  display: flex;
  align-items: center;
  width: 200px;
  cursor: pointer;
}

.interview2-wrap footer ul li:hover {
  background-color: #f0efef;
  border-radius: 12px;
}

.interview2-wrap footer ul li div p:nth-of-type(2) {
  font-size: 12px;
  color: #ccc;
}

.interview2-wrap footer ul li div p:nth-of-type(3) {
  font-size: 12px;
  color: #ccc;
}
.interview2-wrap footer ul li img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
</style>
